loginDialog: Add an :expanded pseudo class to the user list

We want to style user list items differently depending on whether
the list is expanded or shrunk; instead of manually updating the
items' style, we can just expose the :expanded style on the list
itself and use that in the CSS.

https://bugzilla.gnome.org/show_bug.cgi?id=658185

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 507e349c4abb6c927dd85d1f709ab9de3c2e2c3c..a0e72f37c8b1866e8f03f527329d0c8b3486189c 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -2070,7 +2070,7 @@ StButton.popup-menu-item:insensitive {
 }
 
 .login-dialog-user-list-item:hover .login-dialog-user-list-item-name,
-.login-dialog-user-list-item:focus .login-dialog-user-list-item-name {
+.login-dialog-user-list:expanded .login-dialog-user-list-item:focus .login-dialog-user-list-item-name {
     color: white;
     text-shadow: black 0px 2px 2px;
 }
@@ -2079,7 +2079,7 @@ StButton.popup-menu-item:insensitive {
     background-color: rgba(255,255,255,0.1);
 }
 
-.login-dialog-user-list-item:focus {
+.login-dialog-user-list:expanded .login-dialog-user-list-item:focus {
     background-color: rgba(255,255,255,0.33);
 }
 

diff --git a/js/gdm/loginDialog.js b/js/gdm/loginDialog.js
index 54cf8142d0dd3cffcd4ae74bb9b30b35ba3cd1c4..9b8451451c07e97d29430abb8d6bcda4100b45b1 100644 (file)
--- a/js/gdm/loginDialog.js
+++ b/js/gdm/loginDialog.js
@@ -173,7 +173,7 @@ const UserListItem = new Lang.Class({
     },
 
     syncStyleClasses: function() {
-        if (this.actor.can_focus && global.stage.get_key_focus() == this.actor)
+        if (global.stage.get_key_focus() == this.actor)
             this.actor.add_style_pseudo_class('focus');
         else
             this.actor.remove_style_pseudo_class('focus');
@@ -223,7 +223,8 @@ const UserList = new Lang.Class({
                               Gtk.PolicyType.AUTOMATIC);
 
         this._box = new St.BoxLayout({ vertical: true,
-                                       style_class: 'login-dialog-user-list' });
+                                       style_class: 'login-dialog-user-list',
+                                       pseudo_class: 'expanded' });
 
         this.actor.add_actor(this._box);
         this._items = {};
@@ -313,6 +314,7 @@ const UserList = new Lang.Class({
                 });
         }
 
+        this._box.remove_style_pseudo_class('expanded');
         let batch = new Batch.ConsecutiveBatch(this,
                                                [function() {
                                                     return GdmUtil.fadeOutActor(this.actor.vscroll);
@@ -368,6 +370,7 @@ const UserList = new Lang.Class({
             });
         }
 
+        this._box.add_style_pseudo_class('expanded');
         let batch = new Batch.ConsecutiveBatch(this,
                                                [function() {
                                                     this.takeOverWhitespace();